import React, { ReactElement, useState, useEffect } from 'react'
import { Table, Button, Space, Popconfirm, message } from 'antd';
import { getArticles, delArticles } from '@/api/article'
import { history } from 'umi'

interface Props {

}



export default function list({ }: Props): ReactElement {
    const [data, setData] = useState([])
    const columns = [
        {
            title: '序号',
            key: 'name',
            align: 'center',
            render: (name: any, item: any, index: number) => `${index + 1}`,
        },
        {
            title: '所属分类',
            dataIndex: 'cate',
            key: 'cate',
            align: 'center',
            render: (row: any) => {
                return <div>

                    {
                        row.map((item: any, index: number) => {
                            return <span key={index}>
                                {item.name}
                                {
                                    index >= row.length - 1 ? '' : <span>/</span>
                                }
                            </span>
                        })
                    }
                </div>
            },
            width: '20%',
        },
        {
            title: '标题',
            key: 'title',
            dataIndex: 'title',
            align: 'center',
        },
        {
            title: '操作',
            key: 'email',
            align: 'center',
            render: (row: any) => {
                return <Space>
                    <Button onClick={() => {
                        history.push({
                            pathname: '/article/edit/' + row._id,
                            state: {
                                parent: row.cate[0].parent
                            }
                        })
                    }} type="primary">编辑</Button>
                    <Popconfirm
                        title="Are you sure？"
                        onCancel={() => {
                            message.info('已取消')
                        }}
                        onConfirm={() => {
                            delArticles(row._id).then(res => {
                                init()
                            })
                        }}
                        okText="Yes"
                        cancelText="No">
                        <Button type="primary" danger>删除</Button>
                    </Popconfirm>
                </Space>
            }
        },
    ];
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        // total: 100,
        pageSizeOptions: [5, 8, 10, 15]
    })
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        init()
    }, [])

    function init() {
        getArticles({
            pagenum: pagination.current,
            pagesize: pagination.pageSize
        }).then(res => {
            const pagination2 = JSON.parse(JSON.stringify(pagination))
            pagination2.total = res.data.total
            setPagination(pagination2)
            // total
            setData(res.data.data)
        })
    }

    function handleTableChange(currentInfo: any) {
        const pagination2 = JSON.parse(JSON.stringify(pagination))
        pagination2.current = currentInfo.current
        pagination2.pageSize = currentInfo.pageSize
        pagination2.total = currentInfo.total
        setPagination(pagination2)

        getArticles({
            pagenum: currentInfo.current,
            pagesize: currentInfo.pageSize
        }).then(res => {
            setData(res.data.data)
        })
    };
    return (
        <div>
            <Button type="primary"
                    onClick={() => {
                        history.push('/article/create')
                    }}
                    style={{
                        marginBottom: 15
                    }}>+ 添加文章</Button>
            <Table
                bordered
                columns={columns}
                rowKey={(record: any) => record._id}
                dataSource={data}
                pagination={pagination}
                loading={loading}
                onChange={handleTableChange}
            />
        </div>
    )
}
